<template>
  <div class="user-bg-container">
    <div class="user-info flex-start">
      <i class="huang icon iconfont iconhuangguan"></i>
      <div class="cover">
        <img :src="user_head">
      </div>
      <div class="info">
        <div class="t flex-start">
          <span class="name">{{username}}</span>
          <span class="tag">代理商</span>
        </div>
        <div class="address flex-start">
          <i class="icon iconfont icondingweiweizhizuobiaoxianxing"></i>
          <span class="t">代理区域：迁安市</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "userBg",
    data() {
      return {
        username:localStorage.getItem("user_name"),
        user_head:localStorage.getItem("user_head")
      }
    },
    computed: {
      
    },
    created() {
      
    },
    mounted() {

    },
    methods: {
      
    }
  }
</script>

<style lang="less" scoped>
.promise(@css, @args) {
  @{css}: @args;
  -webkit-@{css}: @args;
  -moz-@{css}: @args;
  -ms-@{css}: @args;
  -o-@{css}: @args;
}
.user-bg-container{
  width: 100%;
  height: 300/37.5rem;
  background: url('/static/images/j-head-bg.jpg') no-repeat center / cover;
  .user-info{
    padding: 100/37.5rem 0 0 70/37.5rem;
    position: relative;
    .cover{
      width: 104/37.5rem;
      height: 104/37.5rem;
      overflow: hidden;
      position: relative;
      text-align: center;
      border: 1px solid #fff;
      .promise(border-radius, 50%);
      img{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        margin: auto;
      }
    }
    .huang{
      color: #F84F4C;
      position: absolute;
      font-size: 60/37.5rem;
      top: 40/37.5rem;
      left: 125/37.5rem;
      .promise(transform, rotate(20deg));
    }
    .info{
      margin-left: 0.6rem;
      .t{
        font-size: 34/37.5rem;
        color: #666;
        .tag{
          display: inline-block;
          padding: 3px 6px;
          font-size: 20/37.5rem;
          color: #fff;
          margin-left: 0.8rem;
          background: #F84F4C;
          .promise(border-radius, 2rem);
        }
      }
      .address{
        margin-top: 0.4rem;
        .icon{
          font-size: 42/37.5rem;
          color: #666;
        }
        .t{
          font-size: 24/37.5rem;
          margin-top: 0.3rem;
        }
      }
    }
  }
}
</style>